<template>
	<view class="">
		<date-picker @confirm="onConfirmSelect1" :date="time1" :visible.sync="timeShow1"></date-picker>

		<date-picker @confirm="onConfirmSelect2" :date="time2" :need-week="false" :visible.sync="timeShow2"></date-picker>

		<date-picker @confirm="onConfirmSelect3" :date="time3" :range-start="rangeStart" :range-end="rangeEnd" :visible.sync="timeShow3"></date-picker>

		<view class="list">
			<view class="listItem" @tap="toggleShow1">
				<view class="hd title">日期选择</view>
				<view class="bd"></view>
				<view class="ft">{{ timeStr1 ? timeStr1 : '-- : --' }}</view>
			</view>
			<view class="listItem" @tap="toggleShow2">
				<view class="hd title">日期选择(禁用周末)</view>
				<view class="bd"></view>
				<view class="ft">{{ timeStr2 ? timeStr2 : '-- : --' }}</view>
			</view>
			<view class="listItem" @tap="toggleShow3">
				<view class="hd title">日期选择(开始时间,结束时间)</view>
				<view class="bd"></view>
				<view class="ft">{{ timeStr3 ? timeStr3 : '-- : --' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp()
const { appUtils } = require('@/utils/util.js')

import DatePicker from '@/components/date-picker/index'

export default {
	components: {
		'date-picker': DatePicker
	},
	data() {
		return {
			time1: undefined,
			timeStr1: '',
			timeShow1: false,

			time2: undefined,
			timeStr2: '',
			timeShow2: false,

			time3: undefined,
			timeStr3: '',
			timeShow3: false,
			rangeStart: undefined,
			rangeEnd: undefined
		}
	},
	onLoad() {
		let date = new Date()
		this.rangeStart = date.getTime()

		date.setDate(date.getDate() + 14)
		this.rangeEnd = date.getTime()
	},
	methods: {
		onConfirmSelect1(e) {
			let { date, dateTimeStr } = e
			this.time1 = date.getTime()
			this.timeStr1 = dateTimeStr
		},
		onConfirmSelect2(e) {
			let { date, dateTimeStr } = e
			this.time2 = date.getTime()
			this.timeStr2 = dateTimeStr
		},
		onConfirmSelect3(e) {
			let { date, dateTimeStr } = e
			this.time3 = date.getTime()
			this.timeStr3 = dateTimeStr
		},
		toggleShow1() {
			this.timeShow1 = true
		},
		toggleShow2() {
			this.timeShow2 = true
		},
		toggleShow3() {
			this.timeShow3 = true
		}
	}
}
</script>

<style lang="scss">
@import '~@/common/css/variables';

.list {
	background: #ffffff;
	margin: 20rpx 0;
	border-top: 1rpx solid $lineColor;
	border-bottom: 1rpx solid $lineColor;

	.listItem {
		display: flex;
		align-items: center;
		position: relative;
		padding: 20rpx 30rpx;

		&:not(:last-child) {
			border-bottom: 1rpx solid $lineColor;
		}

		.bd {
			flex: 1;
		}
	}
}

.app-btn {
	margin-bottom: 100rpx;
}
</style>
